<template>
  <div class="login-container">
    <!-- 表单 -->
    <div class="login-form">
      <!-- --------- -->

      <el-form
        :label-position="labelPosition"
        :model="form"
        :rules="rules"
        ref="fff"
      >
        <!-- 表单校验 -->

        <div class="img_box">
          <img
            class="img1"
            src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
            alt=""
          >
        </div>
        <el-form-item prop="name">
          <el-input
            placeholder="请输入账号"
            prefix-icon="el-icon-mobile"
            v-model="form.name"
          >
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            show-password
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="form.password"
          >
          </el-input>
        </el-form-item>

        <el-form-item prop="code">
          <el-input
            placeholder="请输入验证码"
            prefix-icon="el-icon-folder-checked"
            class="ip3"
            v-model="form.code"
          >
            <!-- 插入验证码图片 -->
            <template slot="append">
              <img
                class="yzm"
                :src="pic"
                  @click="changeImg"
              >
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            class="btn"
          >登录</el-button>
        </el-form-item>

      </el-form>
      <!---------- -->
    </div>
  </div>
</template>

<script>
import { getRandom } from '@/utils/random'// 扒的方法
import { getCodes } from '@/api/getimg'

export default {
  name: 'login-page',
  data () {
    return {
      labelPosition: 'left',
      form: {
        name: 'admin',
        password: '123456',
        code: '',
        clientToken: '',
        loginType: 0
      },
      random: '',
      pic: '', // 验证码图片
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: ['change', 'blur'] },
          { min: 5, max: 10, message: '长度为5-10', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
          { min: 5, max: 10, message: '长度为5-10', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    /* 解码获取图片路径 */
    imgfn (res) {
      this.pic = 'data:image/png;base64,' + /* 给到data中的imgsrc */
          btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      console.log(this.pic)
    },
    async changeImg () {
      this.random = getRandom()/* 更新获取新的随机数 */
      this.code = await getCodes(this.random)/* 更新发送乱码请求，更新code */
      this.imgfn(this.code)/* 更新路径 */
    },
    async onSubmit () {
      // 表单验证
      await this.$refs.fff.validate()
      await this.$store.dispatch('user/settoken',
        {
          loginName: this.form.name,
          password: this.form.password,
          code: this.form.code,
          clientToken: this.random,
          loginType: 0
        }
      )
    }

  },
  async created () {
    // 获取乱码
    this.random = getRandom()// 获取随机数
    this.code = await getCodes(this.random)// 发送乱码请求 存入data
    this.imgfn(this.code)/* 调用imgfn得到图片路径 */
  }

}
</script>

<style lang="less" scoped>
  .yzm {
    width: 70px;
    height: 45px;
  }
  .el-input {
    position: relative;
    font-size: 14px;
    width: 448px;
  }
  // .ip3{
  //   width: 100px;
  // }
  .img1 {
    width: 6.25rem;
    height: 6.25rem;
  }
  .img_box {
    position: absolute;
    top: -3.125rem;
    left: 50%;
    transform: translateX(-3.125rem);

    z-index: 99;
  }
  .el-button--primary {
    width: 100%;
  }
  .el-form-item__content {
    margin-left: 0;
  }
  .btn {
    width: 100%;
    height: 3.25rem;
    background: linear-gradient(262deg, #2e50e1, #6878f0);
    opacity: 0.91;
    border-radius: 0.5rem;
    color: #fff;
  }
  .login-container {
    position: relative;
    height: 100vh;
    width: 100%;
    background-image: url(http://likede2-admin.itheima.net/img/background.be4fae7d.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
  // .el-input__inner {
  //   height: 3.25rem;
  //   width: 28rem;
  // }
  ::v-deep .el-input__inner {
    // width: 28rem;
    height: 3.125rem;
  }
  .el-form.el-form--label-left {
    margin-top: 2.5rem;
  }
  .login-form {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 32.375rem;
    height: 24.25rem;
    border-radius: 1.875rem;
    top: 23%;
    left: 50%;
    transform: translateX(-16.1875rem);
    background-color: #fff;

    // transform: translateY(-12.125rem);
  }
</style>
